<!--
  @文件名：child1
  @来源：Winford.Wang|2022/11/11 0011，10:00
  @描述：
-->
<template>
  <div class="child1">
   22
    {{propA}}
    {{computedMsg1}}
    <el-button @click="addToCount(1)">按钮</el-button>
  </div>
</template>

<script lang="ts">
import { Vue, Options, Prop, Watch, Emit } from 'vue-property-decorator'

@Options({
  name: 'child1'
})

export default class child1 extends Vue {
  @Prop({
    default: null
  }) propA!: string|number

  countNum = 0

  public get computedMsg1 ():string {
    return '这里是计算属性' + this.propA
  }

  @Watch('propA', { immediate: true, deep: false })
  private onChangeParentValue (newValue: string, oldValue: string):void {
    console.log(newValue, oldValue)
  }

  @Emit()
  addToCount (n: number) :number {
    this.countNum += n
    return this.countNum
  }
}

</script>

<style scoped lang='scss'>
.child1 {

}
</style>
